<template>
  <view
    :class="[
      type ? 'is-' + type : '',
      disabled === true || disabled === 'true' ? 'is-disabled' : '',
      plain === true || plain === 'true' ? 'is-plain' : '',
      circle === true || circle === 'true' ? 'is-circle' : '',
      mark === true || mark === 'true' ? 'is-mark' : '',
      size ? 'is-' + size : ''
    ]"
    :style="tagStyle"
    @click="onClick()"
    class="ui-tag"
  >
    <view :class="['ui-tag--text' ]" :style="tagTextStyle">
      <slot>{{ text }}</slot>
    </view>
  </view>
</template>

<script>
/**
 * Tag 标签
 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
 * @tutorial https://ext.dcloud.net.cn/plugin?id=35
 * @property {String} text 标签内容
 * @property {String} size = [normal|small] 大小尺寸
 * 	@value normal 正常
 * 	@value small 小尺寸
 * @property {String} type = [default|primary|success｜warning｜error｜royal]  颜色类型
 * 	@value default 灰色
 * 	@value primary 蓝色
 * 	@value success 绿色
 * 	@value warning 黄色
 * 	@value error 红色
 * 	@value royal 紫色
 * @property {Boolean} disabled = [true|false] 是否为禁用状态
 * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
 * @property {Boolean} circle = [true|false] 是否为圆角
 * @event {Function} click 点击 Tag 触发事件
 */

export default {
  name: "uiTag",
  props: {
    type: {
      // 标签类型default、primary、success、warning、error、royal
      type: String,
      default: "default"
    },
    size: {
      // 标签大小 normal, small
      type: String,
      default: ""
    },
    // 标签内容
    text: {
      type: String,
      default: ""
    },
    disabled: {
      // 是否为禁用状态
      type: [Boolean, String],
      defalut: false
    },
    plain: {
      // 是否为空心
      type: [Boolean, String],
      defalut: false
    },
    circle: {
      // 是否为圆角样式
      type: [Boolean, String],
      defalut: false
    },
    mark: {
      // 是否为标记样式
      type: [Boolean, String],
      defalut: false
    },
    // 自定义颜色
    color: {
      type: String,
      default: ""
    },
    // 文本颜色，优先级高于color属性
    textColor: {
      type: String,
      default: ""
    }
  },
  computed: {
    tagStyle() {
      let tagStyle = "";
      if (this.color) {
        tagStyle += `background-color:${this.color};color:#fff;`;
      }
      if (this.plain && this.color) {
        tagStyle = `border-color:${this.color};background-color:#fff;color:${this.color};`;
      }
      return tagStyle;
    },
    tagTextStyle() {
      let tagTextStyle = "";
      if (this.textColor) {
        tagTextStyle += `color:${this.textColor};`;
      }
      return tagTextStyle;
    }
  },
  methods: {
    onClick() {
      if (this.disabled === true || this.disabled === "true") {
        return;
      }
      this.$emit("click");
    }
  }
};
</script>

<style lang="scss" scoped src="@/scss/components/tag.scss">
</style>
